<template>
  <div class="virtual_member_use_detail">
    <el-card shadow="never" class="card-com" style="margin-top: 10px">
      <div class="card-1">
        <searchPanel @refresh="getData('reset')" @changePanel="resizeWin">
          <!-- 查询面板 -->
          <template v-slot:search>
            <el-form :inline="true" :model="listSearch" class="demo-form-inline" label-width="120px">
              <el-row :gutter="20">
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="方案编码">
                    <NormalInput v-model:model-value="listSearch.condition.schemeCode" @get-data="getData('search')">
                    </NormalInput>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="方案类型">
                    <el-select v-model="listSearch.condition.schemeType" placeholder="请选择方案类型" clearable
                      @change="getData('search')">
                      <el-option v-for="item in schemeType" :key="item.id" :value="item.id"
                        :label="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="方案名称">
                    <NormalInput v-model:model-value="listSearch.condition.schemeName" @get-data="getData('search')">
                    </NormalInput>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row justify="end">
                <el-button type="primary" @click="getData('search')">查询</el-button>
                <el-button @click="getData('reset')">重置</el-button>
              </el-row>
            </el-form>
          </template>
          <!-- 字段添加 -->
          <template v-slot:edit>
            <el-button :icon="Plus" type="primary" @click="AddEdit('add')"></el-button>
            <DropItem v-model:table-prop="tableProp"></DropItem>
          </template>
        </searchPanel>
      </div>
      <div class="card-2">
        <!-- table数据 -->
        <OnlyTable ref="onlyTableRef" class="card-2" :tableProps="tableProp" :pageTotal="pageParams.total"
          @get-page="handPage" :tableData="pageParams.tableData" :tableHeight="pageParams.tableHeight"
          :loading="pageParams.loadIng">
          <template #handle="scope">

            <el-button link type="primary" @click="AddEdit('edit', scope.row)">编辑</el-button>
            <el-button link type="danger" @click="delBtn(scope.row)">删除</el-button>
            <el-button link type="primary" @click="detailBtn(scope.row)">详情</el-button>
          </template>
        </OnlyTable>
      </div>
    </el-card>
    <addAndEdit ref="schemeRef" @refresh="getData('reset')" @search-edit="getData('search')"></addAndEdit>
    <lookDetail ref="loopRef"></lookDetail>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import {
  onMounted,
  ref,
  nextTick,
  onUnmounted,
  defineAsyncComponent,
} from "vue";
import { Search, Plus, Refresh, Download } from "@element-plus/icons-vue";
import { useEnumStore } from "@/store/enumeration";

import _ from "lodash";
import { schemeListStore } from "./pageStore";
import { useComListData } from "@/store/list";
const addAndEdit = defineAsyncComponent(
  () => import("./component/addAndEdit.vue")
);
const lookDetail = defineAsyncComponent(
  () => import("./component/look.vue")
);
const onlyTableRef = ref()
const { getEquityList } = useComListData();
const {
  detailData,
  tableProp,
  listSearch,
  pageParams,
  detailRef,
  schemeRef,
  loopRef,
} = storeToRefs(schemeListStore());
const { getDate1, handPage, delBtn, detailBtn, quotaBtn, AddEdit } =
  schemeListStore();
const { schemeType } = useEnumStore();

onMounted(() => {
  getDate1("reset");
  nextTick(() => {
    const dom1 = document.querySelector(".card-1") as any;
    const dom2 = document.querySelector(".card-com") as any;
    if (dom2) {
      const height = dom2.offsetHeight - dom1.offsetHeight - 70;
      pageParams.value.tableHeight = height;
    }
  });
  window.addEventListener("resize", resizeWin);
  getEquityList();
});
onUnmounted(() => {
  window.removeEventListener("resize", resizeWin);
});
const resizeWin = _.debounce(() => {
  const dom1 = document.querySelector(".card-1") as any;
  const dom2 = document.querySelector(".card-com") as any;
  if (dom2) {
    const height = dom2.offsetHeight - dom1.offsetHeight - 70;
    pageParams.value.tableHeight = height;
  }
}, 200);
const getData = (type: string) => {
  if (type == 'reset') onlyTableRef.value.initPagination()
  getDate1(type);
};
</script>

<style scoped lang="scss">
.virtual_member_use_detail {
  height: calc(100vh - 156px);

  .card-com {
    display: flex;
    flex-direction: column;

    .card-2 {
      flex-grow: 1;
    }
  }
}
</style>
